
<template>
  <div class="app-container calendar-list-container z-h-100">
    <el-row :span="24" class="z-h-100">
      <el-col v-loading="treeData.length===0" :xs="24" :sm="24" :md="5" class="filter-container-tree z-h-100">
        <div class="filter-container">
          <el-button-group>
            <el-button
              v-if="deptManager_btn_add"
              type="primary"
              size="small"
              icon="plus"
              @click="handlerAdd"
            >添加</el-button>
            <el-button
              v-if="deptManager_btn_edit"
              type="primary"
              size="small"
              icon="edit"
              @click="handlerEdit"
            >编辑</el-button>
            <el-button
              v-if="deptManager_btn_del"
              type="primary"
              size="small"
              icon="delete"
              @click="handleDelete"
            >删除</el-button>
          </el-button-group>
        </div>
        <el-scrollbar v-if="treeData.length>0" ref="treeScrollbar" class="scrollbarCls">
          <div class="treeWrapper">
            <el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              :filter-node-method="filterNode"
              class="filter-tree"
              node-key="id"
              highlight-current
              :default-expanded-keys="defaultExpandedKeys"
              :expand-on-click-node="false"
              @node-click="getNodeData"
              @node-expand="toggleChange"
              @node-collapse="toggleChange"
            />
          </div>
        </el-scrollbar>

      </el-col>

      <el-col :xs="24" :sm="24" :md="19" class="authorDept__main z-h-100">
        <el-form
          ref="form"
          :label-position="labelPosition"
          :rules="rules"
          :model="form"
          label-width="80px"
          size="mini"
        >
          <el-form-item label="父级节点" prop="parentId">
            <el-input v-model="form.parentId" disabled placeholder="请输入父级节点" />
          </el-form-item>
          <el-form-item v-if="formEdit" label="项目编号" prop="code">
            <el-input v-model="form.code" disabled placeholder="项目编号" />
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="form.name" :disabled="formEdit" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input
              v-model="form.sort"
              :disabled="formEdit"
              type="number"
              placeholder="请输入排序"
            />
          </el-form-item>
          <el-form-item v-if="formStatus === 'update'">
            <el-button type="primary" @click="update">更新</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
          <el-form-item v-if="formStatus === 'create'">
            <el-button type="primary" @click="create">保存</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { addObj, delObj, fetchTree, getObj, putObj } from '@/api/admin/dept'
import { mapGetters } from 'vuex'

export default {
  name: 'AuthorDept',
  data() {
    return {
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: ['0', '1'],
      methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      rules: {
        parentId: [
          { required: true, message: '请输入父级节点', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入项目编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序值', trigger: 'blur' }
        ]
      },
      labelPosition: 'right',
      form: {
        name: undefined,
        sort: undefined,
        parentId: undefined,
        code: undefined
      },
      currentId: 0,
      deptManager_btn_add: false,
      deptManager_btn_edit: false,
      deptManager_btn_del: false,
      defaultExpandedKeys: []
    }
  },
  computed: {
    ...mapGetters([
      'elements',
      'permissions'
    ])
  },
  watch: {
    // treeData() {
    //   this.$nextTick(() => {
    //     console.log(this.$refs.elScrollbar)
    //     this.$refs.elScrollbar.update()
    //   })
    // }
  },
  created() {
    this.getList()
    this.deptManager_btn_add = this.permissions.sys_dept_add
    this.deptManager_btn_edit = this.permissions.sys_dept_edit
    this.deptManager_btn_del = this.permissions.sys_dept_del
  },

  methods: {
    // 树发生变化滚动条变化
    toggleChange() {
      this.$refs.treeScrollbar.update()
    },
    getList() {
      fetchTree(this.listQuery).then(response => {
        this.treeData = response.data.data
        if (this.treeData && this.treeData.length > 0) {
          this.defaultExpandedKeys.push(this.treeData[0].id)
        }
      })
    },
    filterNode(value, data) {
      if (!value) {
        return true
      }
      return data.label.indexOf(value) !== -1
    },
    getNodeData(data) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getObj(data.id).then(response => {
        this.form = response.data.data
      })
      this.currentId = data.id
      this.showElement = true
    },
    handlerEdit() {
      if (this.form.code) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    handlerAdd() {
      this.resetForm()
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.getList()
          this.resetForm()
          this.onCancel()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    update() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        putObj(this.form).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    create() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        addObj(this.form).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    onCancel() {
      this.formEdit = true
      this.formStatus = ''
    },
    resetForm() {
      this.form = {
        parentId: this.currentId
      }
    }
  }
}
</script>
<style lang="less" scoped>
.calendar-list-container{
  background-color:#fff;
  .filter-container{

    margin-bottom: 10px;
  }
  .filter-container-tree{
    height:calc(100% - 35px);
    padding:10px;
    margin-bottom:0px;
    .treeWrapper{
      height:calc(100% - 45px);
    }
  }
  .authorDept__main{
    padding: 20px;
  }
}
</style>

